<template>
  <el-container class="layout-container">
    
    <el-aside :width="isCollapse ? '64px' : '200px'" class="aside">
      <div class="logo">
        <img src="@/assets/logo.png" alt="Logo">
        <h1 v-show="!isCollapse">管理系统</h1>
      </div>
      <div class="collapse-btn" @click="toggleCollapse">
        <i :class="isCollapse ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
      </div>
      
      <el-menu
        :default-active="activeMenu"
        class="menu"
        :collapse="isCollapse"
        :collapse-transition="false"
        background-color="#5849A8"
        text-color="rgba(255, 255, 255, 0.8)"
        active-text-color="#ffffff"
        router
        unique-opened
      >
        <!-- 菜单项 -->
        <sidebar-item 
          v-for="route in routes" 
          :key="route.path" 
          :item="route" 
          :base-path="route.path"
        />
      </el-menu>
      <!-- 用户信息放在侧边栏底部 -->
      <div class="sidebar-footer">
        <el-dropdown trigger="click" @command="handleCommand">
          <div class="user-info">
            <el-avatar :size="32" :src="userAvatar"></el-avatar>
            <div v-show="!isCollapse" class="user-detail">
              <span class="username">{{ username }}</span>
              <small class="user-role">{{ userRole }}</small>
            </div>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="profile">个人信息</el-dropdown-item>
            <el-dropdown-item command="settings">系统设置</el-dropdown-item>
            <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-aside>
    <el-container>
      <!-- <el-header class="header">
        <div class="header-left">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ currentRoute }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="header-right">
          <div 
            class="theme-toggle"
            @click="handleThemeToggle"
          >
            <i :class="currentMode === 'dark' ? 'el-icon-sunny' : 'el-icon-moon'"></i>
          </div>
          <div class="collapse-btn" @click="toggleCollapse">
            <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
          </div>
        </div>
      </el-header> -->
      <el-main class="main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapState } from 'vuex'
import { getThemeMode, toggleThemeMode } from '@/utils/theme'
import SidebarItem from './components/SidebarItem.vue'

export default {
  name: 'BasicLayout',
  components: {
    SidebarItem
  },
  data() {
    return {
      isCollapse: false,
      currentMode: getThemeMode(),
      userAvatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      variables: {
        menuBg: 'var(--component-bg)',
        menuText: 'var(--text-regular)',
        menuActiveText: 'var(--primary-color)'
      }
    }
  },
  computed: {
    ...mapState('permission', ['routes']),
    ...mapState('user', ['userInfo']),
    username() {
      return this.userInfo?.usName || '未登录'
    },
    userRole() {
      return this.userInfo?.usRole === 1 ? '管理员' : '普通用户' || '未知角色'
    },
    activeMenu() {
      return this.$route.path
    },
    currentRoute() {
      const route = this.$route
      let title = ''
      
      if (route.matched && route.matched.length > 0) {
        title = route.matched[route.matched.length - 1].meta.title || ''
      }
      
      return title
    }
  },
  created() {
    // 如果没有用户信息，尝试获取
    if (!this.userInfo) {
      this.$store.dispatch('user/getUserInfo').catch(error => {
        console.error('获取用户信息失败:', error)
      })
    }
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    handleThemeToggle() {
      this.currentMode = toggleThemeMode()
    },
    async handleCommand(command) {
      if (!command) return
      
      switch (command) {
        case 'profile':
          // 跳转到个人信息页
          this.$router.push('/profile')
          break
        case 'settings':
          // 跳转到设置页
          this.$router.push('/settings')
          break
        case 'logout':
          try {
            await this.$store.dispatch('user/logout')
            this.$router.push('/login')
            this.$message.success('退出登录成功')
          } catch (error) {
            console.error('退出登录失败:', error)
            this.$message.error('退出登录失败')
          }
          break
      }
    }
  }
}
</script>

<style lang="scss">
.layout-container {
  height: 100vh;
  background-color: var(--bg-color);

  .aside {
    background-color: var(--primary-color);
    border-right: 1px solid var(--border-color);
    transition: width 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: unset;

    .collapse-btn {
      position: absolute;
      top: 48px;
      right: -12px;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      color: var(--primary-color);
      border-radius: 50%;
      cursor: pointer;
      z-index: 100;
      transition: all 0.3s;
      box-shadow: 0 2px 8px rgba(88, 73, 168, 0.3);

      &:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(88, 73, 168, 0.4);
      }

      i {
        font-size: 14px;
      }
    }

    .logo {
      height: 60px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      color: white;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      overflow: hidden;
      flex-shrink: 0;

      img {
        height: 32px;
        margin-right: 12px;
      }

      h1 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        white-space: nowrap;
        color: white;
      }
    }

    .menu {
      border-right: none;
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;

      &:not(.el-menu--collapse) {
        width: 200px;
      }

      // 折叠状态下的样式
      &.el-menu--collapse {
        width: 64px !important;

        .el-menu-item, .el-submenu__title {
          padding-left: 20px !important;
          
          span {
            display: none;
          }
        }

        .el-submenu__icon-arrow {
          display: none;
        }
      }

      // 基础菜单样式
      .el-menu-item, .el-submenu__title {
        height: 50px;
        line-height: 50px;
        
        i {
          margin-right: 16px;
          font-size: 18px;
          width: 24px;
          text-align: center;
        }
      }
    }

    .sidebar-footer {
      padding: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      flex-shrink: 0;

      .user-info {
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;

        .user-detail {
          flex: 1;
          overflow: hidden;

          .username {
            display: block;
            font-size: 14px;
            color: white;
            white-space: nowrap;
          }

          .user-role {
            display: block;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.7);
          }
        }
      }
    }
  }

  .header {
    background-color: var(--component-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;

    .header-left {
      display: flex;
      align-items: center;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 16px;

      .theme-toggle {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s;
        color: var(--text-regular);
        background-color: var(--bg-color);

        &:hover {
          color: var(--primary-color);
          background-color: var(--primary-color);
          color: white;
        }

        i {
          font-size: 18px;
          transition: transform 0.3s ease;
        }

        &:hover i {
          transform: rotate(30deg);
        }
      }
    }
  }

  .main {
    background-color: var(--bg-color);
    padding: 20px;
  }
}

// 覆盖 Element UI 菜单样式
.el-menu {
  transition: width 0.3s;
  background-color: #5849A8 !important;
  border-right: none !important;
}

.el-menu--vertical {
  .el-menu {
    background-color: #5849A8 !important;
  }
  
  .el-menu-item, .el-submenu__title {
    transition: width 0.3s;
    background-color: #5849A8 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    
    &:hover {
      background-color: rgba(255, 255, 255, 0.1) !important;
      color: white !important;
    }
    
    &.is-active {
      background-color: rgba(255, 255, 255, 0.15) !important;
      color: white !important;
    }
  }
}

/* 弹出菜单样式 */
.el-menu--popup {
  background-color: #5849A8 !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  
  .el-menu-item {
    background-color: #5849A8 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    
    &:hover {
      background-color: rgba(255, 255, 255, 0.1) !important;
      color: white !important;
    }
    
    &.is-active {
      background-color: rgba(255, 255, 255, 0.15) !important;
      color: white !important;
    }
  }
}

// 弹出菜单样式
.el-menu--vertical {
  .el-menu--popup {
    min-width: 160px;
    
    .el-menu-item {
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
    }
  }
}
</style> 